<template>
  <div class="Header" :class="indexclass">
    <div class="Header1">
      <div class="icon-index">
        <slot name="imgsrc"></slot>
      </div>
      <div class="search">
        <nut-searchbar
            :placeText="indexHeader"
            :hasSearchButton="false"
            :has-icon="true"
            search-icon-size=".8rem"
            search-icon-color="#B7B7B7"
            :customClass="cs"
            ref="search"

        ></nut-searchbar>
      </div>
      <div class="index-login"><slot name="header-right"></slot></div >
    </div>
  </div>

</template>



<script>

export default {
  name: "Header",
  props:{
    indexHeader:{
      type:String,
      default:'儿童运动鞋',
    },
    indexclass:{
      type:String
    }
  },
  data(){
    return{
      cs:'index-search',
      Headerdata:'儿童运动鞋',
      style:{},
      opacity:0
    }
  },
  mounted() {
    this.cs+= this.$route.path==='/Index'?'':' jd'
   // this.indexHeader=this.$store.state.indexHeader
    window.addEventListener("scroll", this.windowScroll); //监听页面滚动
  },
  methods: {

  }
}
</script>

<style scoped>
.Header{
  width: 100vw;
  height: 6.5vh;
  position: fixed;
  top: 0;
  z-index: 5;
}
.Header1{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  margin: 0rem 0.625rem;
}
.search{
  width: 19.0625rem;
}
.nut-searchbar{
  height: 1.8rem !important;
}
.nut-searchbar .search-input input{
  padding: 0.3125rem 0 !important;
}
.icon-index{
  width: 1.25rem;
  height: 1.125rem;
}
.index-login{
  font-family: '京东朗正体', serif;
  color: #fff;
  transform: scale(.9,1);
  font-size: 1.1rem;

}

</style>